<template>
  <!-- Mixins语法： -->
  <div>
    混入 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式。
    混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。
    钩子函数合并同名钩子函数将混合为一个数组，因此都将被调用。
    另外，混入对象的钩子函数将在组件自身钩子函数之前调用
    <p>
      数据对象在内部会进行浅合并
      (一层属性深度)，在和组件的数据发生冲突时以组件数据优先（组件的data中变量会覆盖混入对象的data中变量）{{
        username
      }}
    </p>
    <div>
      <button type="button" @click="fn1">fn1</button>
      <button type="button" @click="fn2">fn2</button>
    </div>
  </div>
</template>

<script>
import myMixins from "./mixins/demo-mixins.js";
export default {
  data() {
    return {
      y1: 12,
      x1: 22,
      username: "李四",
    };
  },
  created() {
    console.log("DemoMixins的created.....");
  },
  // 方法会进行合并，如果同名，就用组件之间的方法，替换混入的方法。
  methods: {
    fn1() {
      console.log("fn1");
    },
  },
  mixins: [myMixins],
};
</script>

<style>
</style>